<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
      
                 
        <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="申请人">
              <a-input  disabled   v-decorator="['createName', validatorRules.createName ]" />
          </a-form-item>
        </a-col>
         </a-row>
                 
        <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="所属部门">
              <j-dict-select-tag :triggerChange="true"  disabled  dictCode="sys_depart,depart_name,org_code" v-decorator="[ 'sysOrgCode', validatorRules.sysOrgCode ]">
              </j-dict-select-tag>
          </a-form-item>
        </a-col>
         </a-row>
                 
        <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="单证类型">
              <j-dict-select-tag :triggerChange="true"  disabled  dictCode="document" v-decorator="[ 'type', validatorRules.type ]">
              </j-dict-select-tag>
          </a-form-item>
        </a-col>
         </a-row>
                 
        <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="加班原因">
              <a-textarea  v-decorator="[ 'reason', validatorRules.reason ]" :autoSize="{ minRows: 2, maxRows: 4 }"/>
          </a-form-item>
        </a-col>
         </a-row>
                 
        <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="加班时间">
              <a-date-picker style="width: 100%" showTime   format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'beginDate', validatorRules.beginDate ]" />
          </a-form-item>
        </a-col>
         </a-row>
                 
        <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="至">
              <a-date-picker style="width: 100%" showTime   format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'endDate', {}]" />
          </a-form-item>
        </a-col>
         </a-row>
                 
        <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="时数">
              <a-input-number style="width: 100%"  disabled  v-decorator="[ 'hours', {}]" />
          </a-form-item>
        </a-col>
         </a-row>
                 
        <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="是否加急">
              <j-dict-select-tag :triggerChange="true"  dictCode="status_en" v-decorator="[ 'dispatch', validatorRules.dispatch ]">
              </j-dict-select-tag>
          </a-form-item>
        </a-col>
         </a-row>
                 
        <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="申请日期">
              <a-date-picker style="width: 100%" showTime  disabled  :default-value="moment()" format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'createTime', {}]" />
          </a-form-item>
        </a-col>
         <a-col :span="24">
           <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="审批状态">
            <j-dict-select-tag :triggerChange="true"  disabled  dictCode="bpm_status" v-decorator="[ 'appstatus', validatorRules.appstatus ]">
            </j-dict-select-tag>
         </a-form-item>
           </a-col>
         </a-row>
        
        
         


      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import { mapActions, mapGetters } from 'vuex'


  export default {
    name: "ActeOvertimeModal",
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
            type:{ rules: [{ required: true, message: '请输入单证类型!' ,}],
                  initialValue: '105'},
            reason:{ rules: [{ required: true, message: '请输入加班原因!' ,}],
                  },
            beginDate:{ rules: [{ required: true, message: '请输入加班时间!' ,}],
                  },
            dispatch:{ rules: [{ required: true, message: '请输入是否加急!' ,}],
                  initialValue: 'no'},
                    appstatus:{initialValue: '1'},
        },
        url: {
          add: "/acteOvertime/add",
          edit: "/acteOvertime/edit",
        },
      }
    },
    created () {
    },
    methods: {
      moment,
      //获取当前登录人信息
      ...mapGetters(["userInfo"]),

      add () {
        this.edit({
        createName:this.userInfo().realname,
                sysOrgCode:this.userInfo().orgCode,
                                                                                              });
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'createName','sysOrgCode','type','reason','hours','dispatch','appstatus'))
		  //时间格式化
          this.form.setFieldsValue({beginDate:this.model.beginDate?moment(this.model.beginDate):null})
          this.form.setFieldsValue({endDate:this.model.endDate?moment(this.model.endDate):null})
          this.form.setFieldsValue({createTime:this.model.createTime?moment(this.model.createTime):null})
        });

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            //时间格式化
            formData.beginDate = formData.beginDate?formData.beginDate.format('YYYY-MM-DD HH:mm:ss'):null;
            formData.endDate = formData.endDate?formData.endDate.format('YYYY-MM-DD HH:mm:ss'):null;
            formData.createTime = formData.createTime?formData.createTime.format('YYYY-MM-DD HH:mm:ss'):null;
            
            console.log(formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })



          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>